<!doctype html>
<html>

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wayback Machine</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/common.css">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <link rel="stylesheet" type="text/css" href="css/settings.css">
</head>

<body>

  <!-- Main Popup Page -->
  <div class="unselectable page" id="popup-page">

    <a tabindex="-1" href="#"><img class="resize-fit-center logo-wayback-machine" src="images/wayback-bordered.png"
        alt="Wayback Machine"></a>
    <div class="text-center">

      <!-- Status Messages -->

      <div id="url-not-supported-msg"></div>
      <div id="wayback-count-msg">&nbsp;</div>
      <div id="spn-system-status-msg"></div>
      <div id="using-search-msg"></div>
      <div id="last-saved-msg">&nbsp;</div>

      <!-- Search -->

      <form id="search-container">
        <div class="bootstrap-typeahead clearfix open">
          <div class="bootstrap-typeahead-input" tabindex="-1">
            <input id="search-input" type="text" placeholder="Search URL" value="" autocomplete="off"
              class="form-control has-aux bootstrap-typeahead-input-main has-selection">
          </div>
          <div id="suggestion-box" class="dropdown-menu bootstrap-typeahead-menu dropdown-menu-left">
          </div>
        </div>
        <input type="submit" tabindex="-1" class="search-submit">
      </form>

      <!-- Wayback Machine -->

      <div id="view-archived-container">
        <div id="view-archived-msg">&nbsp;</div>
        <div class="btn-block">
          <button type="button" class="btn btn-sm btn-wide btn-red" id="view-archived-btn" title="">
            <img src="images/toolbar/toolbar-icon-Vc16.png" alt="V" class="toolbar-icon">
            View Archived Version
          </button>
        </div>
      </div>

      <div id="spn-container">
        <div class="spn-flip flip">
          <div id="spn-btn">
            <div class="flip-front">
              <div class="btn btn-sm btn-wide btn-red progress-container">
                <div class="progress" id="save-progress-bar">
                  <div class="progress-bar progress-bar-striped active" role="progressbar">
                  </div>
                </div>
                <button id="spn-front-label">Save Page Now</button>
              </div>
            </div>
            <div class="flip-back">
              <button tabindex="-1" type="button" class="btn btn-sm btn-wide btn-red" id="spn-back-label"></button>
            </div>
          </div>
        </div>
        <div class="chk-frame">
          <label tabindex="-1" class="chk-options auth-click1" for="chk-outlinks" id="chk-outlinks-label"
            title="Archive all Outlinked URLs">
            <span class="auth-icon"><input type="checkbox" class="saved-setting clear-on-logout" id="chk-outlinks"></span><span class="auth-dim" id="chk-outlinks-text">Outlinks</span>
          </label>
          <label tabindex="-1" class="chk-options auth-click1" for="chk-screenshot" id="chk-screenshot-label"
            title="Archive a Screenshot (image)">
            <span class="auth-icon"><input type="checkbox" class="saved-setting clear-on-logout" id="chk-screenshot"></span><span class="auth-dim" id="chk-screenshot-text">Screenshot</span>
          </label>
        </div>
      </div>

      <div class="btn-flex-block">
        <button type="button" class="btn btn-sm btn-equal btn-light-gray not-sup-dim blocked-dim" id="oldest-btn"
          title="Display the earliest archive of a URL">Oldest</button>
        <button tabindex="0" class="btn-social btn-sm btn-red not-sup-dim blocked-dim" id="overview-btn" title="Display a Calendar of archives">
          <img src="images/fa/calendar-alt-regular.svg" alt="Overview">
        </button>
        <button type="button" class="btn btn-sm btn-equal btn-light-gray not-sup-dim blocked-dim" id="newest-btn"
          title="Display the most recent archive of a URL">Newest</button>
      </div>

      <div class="btn-flex-block">
        <button type="button" class="btn btn-sm btn-equal btn-dark-gray not-sup-dim blocked-dim" id="urls-btn"
          title="Show list of URLs captured under the current website">URLs</button>
        <button type="button" class="btn btn-sm btn-equal btn-dark-gray not-sup-dim blocked-dim" id="collections-btn"
          title="Show archived URL by Collection">Collections</button>
        <!-- <button type="button" class="btn btn-sm btn-equal btn-dark-gray" id="bulk-save-btn">Bulk Save</button> -->
      </div>

      <div class="btn-flex-block">
        <button type="button" class="btn btn-sm btn-equal btn-light-gray not-sup-dim blocked-dim" id="site-map-btn"
          title="Display a Site Map for a site, based on archived URLs in the Wayback Machine">Site Map</button>
        <button type="button" class="btn btn-sm btn-equal btn-light-gray not-sup-dim blocked-dim" id="tag-cloud-btn"
          title="Display a Word Cloud based on a site">Word Cloud</button>
      </div>

      <!-- Contexts -->

      <!-- <div class="btn-flex-block">
        <button type="button" class="btn btn-sm btn-equal btn-light-gray" id="tweets-btn"><img src="images/fa/twitter-brands.svg" alt="Twitter" class="tweets-svg"> Tweets</button>
      </div> -->

      <div class="btn-flex-block">
        <button type="button" class="btn btn-sm btn-equal btn-dark-gray not-sup-dim" id="annotations-btn"
          title="Review Hypothesis sourced annotations about a site">Annotations</button>
        <button type="button" class="btn btn-sm btn-equal btn-dark-gray auth-click1" id="my-archive-btn"
          title="Go to my public Web Archive page">My Archive</button>
      </div>

      <div class="btn-flex-block">
        <button type="button" class="btn btn-sm btn-wide btn-light-gray not-sup-dim" id="tweets-btn"
          title="Display Tweets about a URL"><img src="images/fa/twitter-brands.svg" alt="Twitter" class="tweets-svg">
          Search Tweets</button>
      </div>

      <!-- Context Notice -->

      <div id="fact-check-container">
        <div class="btn-block">
          <button type="button" class="btn btn-sm btn-wide btn-yellow" id="fact-check-btn"
            title="Check contextual information">
            <img src="images/toolbar/toolbar-icon-Fc16.png" alt="F" class="toolbar-icon">
            Show Context
          </button>
        </div>
      </div>

      <!-- Related Archived Resources -->

      <div id="readbook-container">
        <div class="btn-block">
          <button type="button" class="btn btn-sm btn-wide btn-blue" id="readbook-btn"
            title="Read or borrow the book">
            <img src="images/toolbar/toolbar-icon-Rc16.png" alt="R" class="toolbar-icon">
            Read Book
          </button>
        </div>
      </div>
      <div id="tvnews-container">
        <div class="btn-block">
          <button type="button" class="btn btn-sm btn-wide btn-blue" id="tvnews-btn"
            title="See related news clips">
            <img src="images/toolbar/toolbar-icon-Rc16.png" alt="R" class="toolbar-icon">
            TV News Clips
          </button>
        </div>
      </div>
      <div id="wiki-container">
        <div class="btn-flex-block">
          <button type="button" class="btn btn-sm btn-equal btn-blue" id="wikibooks-btn" title="Read Cited Books">
            <img src="images/toolbar/toolbar-icon-Rc16.png" alt="R" class="toolbar-icon">
            Books
          </button>
          <button type="button" class="btn btn-sm btn-equal btn-blue" id="wikipapers-btn" title="Read Cited Papers">
            <img src="images/toolbar/toolbar-icon-Rc16.png" alt="R" class="toolbar-icon">
            Papers
          </button>
        </div>
      </div>

      <!-- Share -->

      <div class="link-copied-block">
        <div id="link-copied-msg"></div>
      </div>
      <div class="share-block">
        <button tabindex="0" id="facebook-share-btn" class="btn-social btn-sm btn-facebook not-sup-dim blocked-dim"
          title="Share an archive with Facebook">
          <img src="images/fa/facebook-f-brands.svg" alt="Facebook">
        </button>
        <button tabindex="0" id="twitter-share-btn" class="btn-social btn-sm btn-twitter not-sup-dim blocked-dim"
          title="Share an archive with Twitter">
          <img src="images/fa/twitter-brands.svg" alt="Twitter">
        </button>
        <button tabindex="0" id="linkedin-share-btn" class="btn-social btn-sm btn-linkedin not-sup-dim blocked-dim"
          title="Share an archive with LinkedIn">
          <img src="images/fa/linkedin-in-brands.svg" alt="LinkedIn">
        </button>
        <button tabindex="0" id="copy-link-btn" class="btn-social btn-sm btn-copy not-sup-dim blocked-dim"
          title="Copy an Archive URL to the Clipboard">
          <img src="images/fa/link-solid.svg" alt="Copy Link">
        </button>
      </div>

      <!-- Tab bar -->

      <hr>
      <div class="tab-bar">
        <button tabindex="0" class="tab-item" id="settings-tab-btn">
          <img src="images/fa/cog-solid.svg" class="tab-icon settings-icon-svg" title="Settings" alt="Settings">
        </button>
        <button tabindex="0" class="tab-item" id="feedback-tab-btn">
          <img src="images/tabbar/feedback-icon.svg" class="tab-icon feedback-icon-svg" title="Write a Review"
            alt="Feedback">
        </button>
        <button tabindex="0" class="tab-item" id="donate-tab-btn">
          <img src="images/tabbar/donate-icon.svg" class="tab-icon donate-icon-svg"
            title="Donate to the Internet Archive" alt="Donate">
        </button>
        <button tabindex="0" class="tab-item" id="about-tab-btn">
          <img src="images/fa/info-circle-solid.svg" class="tab-icon about-icon-svg"
            title="About this Extension" alt="About">
        </button>
        <button tabindex="0" class="tab-item" id="login-tab-btn">
          <img src="images/fa/sign-in-alt-solid.svg" class="tab-icon login-icon-svg" title="Log In to Archive.org"
            alt="Log in">
        </button>
        <button tabindex="0" class="tab-item" id="logout-tab-btn">
          <img src="images/fa/sign-out-alt-solid.svg" class="tab-icon logout-icon-svg" title="Log Out of Archive.org"
            alt="Log out">
        </button>
      </div>

    </div>
  </div>

  <!-- Settings Page -->

  <div class="unselectable page" id="setting-page">

    <div class="segmented-container">
      <ul class="nav setting-nav">
        <li><button class="btn btn-sm btn-wide btn-unselected" id="panel1-btn">General</button></li>
        <li><button class="btn btn-sm btn-wide btn-unselected" id="panel2-btn">Context</button></li>
      </ul>
    </div>

    <div id="first-panel" style="margin-bottom: 10px">
      <label class="setting-switch" for="auto-archive-setting">
        <input type="checkbox" class="saved-setting private-setting" id="auto-archive-setting">
        <div class="setting-text-box">
          <span class="toggle">Auto Save Page</span>
          <div style="margin-top: 0.5em">
            <span>if not archived:</span><br>
            <select id="auto-archive-age" class="btn-mini">
              <option value="99999" selected>previously</option>
              <option value="365">within past year</option>
              <option value="90">within 90 days</option>
              <option value="30">within 30 days</option>
              <option value="7">within 7 days</option>
              <option value="1">within 24 hours</option>
            </select>
          </div>
          <div>
            <button class="btn btn-mini" id="exclude-urls-btn">Exclude URLs...</button>
          </div>
        </div>
      </label>
      <label class="setting-switch" for="auto-bookmark-setting" id="auto-bookmark-label">
        <input type="checkbox" class="saved-setting" id="auto-bookmark-setting">
        <div class="setting-text-box">
          <span class="toggle">Auto Save Bookmarks</span>
        </div>
      </label>
      <label class="setting-switch auth-click2" for="email-results-setting">
        <span class="auth-icon"><input type="checkbox" class="saved-setting clear-on-logout" id="email-results-setting"></span>
        <div class="setting-text-box">
          <span class="toggle auth-dim">Email Results</span>
        </div>
      </label>
      <label class="setting-switch auth-click2" for="my-archive-setting">
        <span class="auth-icon"><input type="checkbox" class="saved-setting clear-on-logout" id="my-archive-setting"></span>
        <div class="setting-text-box">
          <span class="toggle auth-dim">Save To My Web Archive</span>
        </div>
      </label>
      <label class="setting-switch" for="resource-list-setting">
        <input type="checkbox" class="saved-setting" id="resource-list-setting">
        <div class="setting-text-box">
          <span class="toggle">Show Resources During Save</span>
        </div>
      </label>
      <label class="setting-switch" for="notify-setting" id="notify-label">
        <input type="checkbox" class="saved-setting" id="notify-setting">
        <div class="setting-text-box">
          <span class="toggle">Disable Notifications</span>
        </div>
      </label>
      <div class="setting-switch" id="view-setting">
        <div id="view-setting-text">Show Features In</div>
        <input class="saved-setting" type="radio" name="view-setting-input" id="view-setting-tab" value="tab">
        <label class="toggle" for="view-setting-tab">New Tab</label>&nbsp;
        <input class="saved-setting" type="radio" name="view-setting-input" id="view-setting-replace" value="replace">
        <label class="toggle" for="view-setting-replace">Same Tab</label><br>
        <input class="saved-setting" type="radio" name="view-setting-input" id="view-setting-window" value="window">
        <label class="toggle" for="view-setting-window">New Window</label><br>
      </div>
    </div>

    <div id="second-panel">
      <label class="setting-switch" for="private-mode-setting">
        <input type="checkbox" class="saved-setting" id="private-mode-setting">
        <div class="setting-text-box">
          <span class="toggle">Private Mode</span>
        </div>
      </label>

      <label class="setting-switch" for="wm-count-setting">
        <input type="checkbox" class="saved-setting private-setting" id="wm-count-setting">
        <div class="setting-text-box">
          <span class="toggle">Wayback Machine Count</span>
        </div>
      </label>

      <label class="setting-switch" for="not-found-setting">
        <input type="checkbox" class="saved-setting private-setting" id="not-found-setting">
        <div class="setting-text-box">
          <span class="toggle">404 Not Found, etc...</span>
          <img src="images/toolbar/toolbar-icon-Vc16.png" alt="V" class="toolbar-icon">
          <div class="embed-popup-group">
            <input type="checkbox" class="saved-setting" id="embed-popup-setting">
            <label for="embed-popup-setting" id="embed-popup-label">pop-up in page</label>
          </div>
        </div>
      </label>

      <label class="setting-switch" for="fact-check-setting">
        <input type="checkbox" class="saved-setting private-setting" id="fact-check-setting">
        <div class="setting-text-box">
          <span class="toggle">Alert if Context is Available</span>
          <img src="images/toolbar/toolbar-icon-Fc16.png" alt="F" class="toolbar-icon">
        </div>
      </label>

      <label class="setting-switch" for="wiki-setting">
        <input type="checkbox" class="saved-setting private-setting" id="wiki-setting">
        <div class="setting-text-box">
          <span class="toggle">Wikipedia Resources</span>
          <img src="images/toolbar/toolbar-icon-Rc16.png" alt="R" class="toolbar-icon">
        </div>
      </label>
      <label class="setting-switch" for="amazon-setting">
        <input type="checkbox" class="saved-setting private-setting" id="amazon-setting">
        <div class="setting-text-box">
          <span class="toggle">Amazon Books</span>
          <img src="images/toolbar/toolbar-icon-Rc16.png" alt="R" class="toolbar-icon">
        </div>
      </label>
      <label class="setting-switch" for="tvnews-setting">
        <input type="checkbox" class="saved-setting private-setting" id="tvnews-setting">
        <div class="setting-text-box">
          <span class="toggle">TV News Clips</span>
          <img src="images/toolbar/toolbar-icon-Rc16.png" alt="R" class="toolbar-icon">
        </div>
      </label>

    </div>

    <div class="btn-block text-center">
      <button class="btn btn-sm btn-auto btn-dark-gray back-btn">Back</button>
    </div>

  </div>

  <!-- Login Page -->

  <div class="unselectable page" id="login-page">

    <a tabindex="-1" href="#"><img class="resize-fit-center logo-wayback-machine" src="images/wayback-bordered.png"
        alt="Wayback Machine"></a>

    <div class="text-center">
      <img src="images/app-icon/app-icon128.png" alt="Internet Archive" class="ia-logo">
      <p id="login-label"></p>
      <span id="login-message"></span>
      <form class="login-form">
        <div class="bootstrap-typeahead-input" tabindex="-1">
          <input id="email-input" type="email" placeholder="Email Address" value="" autocomplete="off"
            class="form-control has-aux bootstrap-typeahead-input-main has-selection login-input">
        </div>
        <div class="bootstrap-typeahead-input" tabindex="-1">
          <input id="password-input" type="password" placeholder="Password" value="" autocomplete="off"
            class="form-control has-aux bootstrap-typeahead-input-main has-selection login-input">
        </div>
        <input tabindex="0" type="submit" value="Log In" class="btn btn-sm btn-wide btn-red" id="login-btn">
        <input tabindex="0" type="button" value="Sign Up" class="btn btn-sm btn-wide btn-dark-gray" id="signup-btn">
        <input tabindex="0" type="button" value="Forgot Password?" class="btn btn-sm btn-wide btn-dark-gray"
          id="forgot-pw-btn">
      </form>
    </div>

    <div class="btn-block text-center">
      <button class="btn btn-sm btn-auto btn-dark-gray back-btn">Back</button>
    </div>

  </div>

  <script src="libs/jquery.js"></script>
  <script src="libs/bootstrap.js"></script>
  <script src="scripts/utils.js"></script>
  <script src="scripts/popup.js"></script>
  <script src="scripts/settings.js"></script>
  <script src="scripts/login.js"></script>
</body>

</html>
